<script lang="ts" setup>
import { COMMITMENT_TYPE_OPTIONS } from '@/config/enum-options';

import DetailDialog from './detail-dialog.vue';

defineOptions({ name: 'Headler' });

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

const add = (type: string) => {
  detailDialogRef.value?.trigger('write', { type });
};
</script>

<template>
  <DetailDialog ref="detailDialogRef" />
  <div flex="~ justify-between">
    <div flex="~">
      <el-dropdown trigger="click" @command="add">
        <el-button type="primary">
          <template #icon>
            <el-icon class="i-custom:add" />
          </template>
          新建
          <el-icon class="i-material-symbols:keyboard-arrow-down-rounded" />
        </el-button>
        <span class="rropdown-link">
          变更状态
          <el-icon class="i-material-symbols:keyboard-arrow-down-rounded" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in COMMITMENT_TYPE_OPTIONS"
              :key="item.value"
              :command="item.value"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
